import React, { Component } from 'react'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import {Redirect} from "react-router-dom"

import { createSaveUserInfoAction } from "../../redux/actions/login_action"
import './css/login.less'
import logo from '../../static/imgs/logo.png'
import {reqLogin} from "../../api"


class Login extends Component {
    handleSubmit = () => {
        let values = {}
        values.username = this.userNode.state.value
        values.password = this.passNode.state.value
        const { username, password } = values
        //发出登录请求
        reqLogin(username,password)
        .then((result)=>{
            const {status,msg,data} = result
            //若状态码为0 ----> 请求成功且账号密码正确
            if(status === 0) {
                //1.将服务器返回的user信息和token进行redux状态管理，并（在action中）把返回的数据放在localStorage里
                this.props.saveUserInfo(data)
                //2.跳转admin
                this.props.history.replace('/admin')
            }else {
                //若状态码为其他 -----> 账号密码错误
                message.warning(msg,1)
            }
        })
        //因为设置了响应拦截器，所以若失败了会中断Promise链，也就不会走下面catch
        .catch((reason)=>{
            console.log(reason);
        })
    };

    
    render() {
        //如果已经登录了，就直接去admin页面吧
        if(this.props.isLogin) {
            return <Redirect to = "/admin/home" />
        }
        
        return (
            <div className='login'>
                <header>
                    <img src={logo} alt="logo" />
                    <h1>商品管理系统</h1>
                </header>
                <section>
                    <h1>用户登录</h1>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        // antd表单提交事件
                        onFinish={this.handleSubmit}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: '请输入你的用户名!' },
                            { max: 12, message: '用户名必须小于等于12位' },
                            { min: 4, message: '用户名必须大于等于4位' },
                            { pattern: /^\w+$/, message: '密码必须是字母、数字、或下划线组成' }]}
                        >
                            <Input ref={c => this.userNode = c} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            // 【标记】下来尝试密码自定义校验
                            rules={[{ required: true, message: '请输入你的密码!' },
                            { max: 12, message: '密码必须小于等于12位' },
                            { min: 4, message: '密码必须大于等于4位' }
                            ]}
                        >
                            <Input
                                ref={c => this.passNode = c}
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="密码"
                            />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}

export default connect(
    state => ({isLogin:state.userInfo.isLogin}),
    {
        saveUserInfo:createSaveUserInfoAction,
    }
)(Login)
